<template>
  <a-modal
    class="tag-modal"
    v-model="tagShow"
    :title="null"
    width="640px"
    @ok="saveTag"
    @cancel="hide">
    <div class="modal-class-title">
      编辑标签组
    </div>
    <div>
      <div class="d-aic">
        <div class="tag-label">标签组名称</div>
        <a-input
          class="mt-10"
          v-model="tagGroup.groupName"
          placeholder="请输入标签组名称"
          :maxLength="15"
          :suffix="tagGroup.groupName.length+'/15'"
          style="width: 370px"/>
      </div>
      <div class="flex">
        <div class="tag-label">标签名称</div>
        <div>
          <div
            class="d-aic"
            v-for="(item,index) in tagList"
            :key="index">
            <a-input
              class="mt-10"
              v-model="item.name"
              placeholder="请输入标签名称"
              :maxLength="10"
              :suffix="item.name.length+'/10'"
              style="width: 370px"/>
            <a-icon v-if="index>0" type="minus-circle" class="remove-tag" @click="removeTag(index)"/>
          </div>
          <div class="d-aic">
            <a-button type="link" icon="plus-circle" style="padding:0" @click="addTag">添加标签</a-button>
          </div>
        </div>
      </div>
    </div>

  </a-modal>
</template>

<script>
  import API from '../../../../api/tag'

  export default {
    name: 'TagMoadl',
    props: {
      tag: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data () {
      return {
        tagShow: false,
        tagGroup: { groupName: '' },
        tagList: [{ name: '' }]
      }
    },
    computed: {
      qwUserId () {
        return this.$store.state.user.info.qwUserId
      }
    },
    methods: {
      show (tagGroup) {
        this.tagGroup = Object.assign({}, tagGroup)
        this.tagList = [].concat(this.tagGroup.tagList)
        this.tagShow = true
      },
      saveTag () {
        try {
          this.checkSave()
        } catch (e) {
          this.$message.error(e.message)
          return
        }
        this.tagGroup.tagList = this.tagList
        this.tagGroup.qwUserId = this.qwUserId
        API.addTag(this.tagGroup).then(res => {
          this.tagShow = false
          this.$emit('saveTag')
          this.$message.success(`添加成功`)
        }).catch(() => {
        })
      },
      checkSave () {
        if (!this.tagGroup.groupName.trim()) {
          throw new Error('请填写标签组名')
        }
        this.tagList.forEach(item => {
          if (!item.name.trim()) {
            throw new Error('请填写标签名')
          }
        })
      },
      hide () {
        this.tagShow = false
      },
      addTag () {
        this.tagList.push({ name: '' })
      },
      removeTag (index) {
        if (this.tagList.length <= 1) {
          this.$message.warning(`标签组标签最少保留一个`)
          return
        }
        this.tagList.splice(index, 1)
      }
    }
  }
</script>

<style scoped lang="less">
  .tag-label {
    margin-right: 15px;
    width: 80px;
    font-size: 14px;
    color: #101010;
  }

  .flex {
    display: flex;
  }

  .mt-10 {
    margin-top: 10px;
  }

  .remove-tag {
    margin-left: 10px;
    font-size: 20px;
    color: #9f9f9f;
  }
</style>
